<template>
	<view class="head">
		<view class="header-wrap">
			<view class="search-header" v-on:focus="focusCustomer()" v-on:blur="blurCustomer()">
				<view class="input-wrap">
					<input type="text" disabled />
				</view>
			</view>
		</view>
		<view class="blank">
			<table id="tips_table" style="display: none;">
			</table>
		</view>
	</view>
</template>

<script>
	import $ from "jquery";
	export default {
		name: 'Search',
		data() {
			return {
				value: '',
				show: false,
				tips: []
			}
		},
		onLoad() {
			//历史搜索记录
		},
		methods: {},
		onNavigationBarButtonTap(val) {
			console.log(val)
			if (this.value != null && this.value != '') {
				uni.navigateTo({
					url:'../product/list?value=' + this.value
				})
			}
		},
		onNavigationBarSearchInputChanged(val) {
			console.log(val)
			this.value = val.text;
			var tab = $("#tips_table");

			tab.empty();
			//提示搜索建议
			if (val.text != null && val.text != '') {

				uni.request({
					url: this.$api_search + '/product/' + this.value + '/1/5',
					method: 'GET',
					success(res) {
						console.log(res)
						if (res.data != '') {
							tab.show();
						}
						var list = [];
						res.data.forEach(( item, index) => {
							var tr = $('<tr><td>' + item.name + '</td></tr>').addClass('.tr');
							$("#tips_table").append(tr)
							list.push(item.name)
							if(index > 10) return
						})
						$("#tips_table").on('click', 'tr', function() {
							//跳转到商品列表
							uni.navigateTo({
								url:'../product/list?keyword=' + $(this).text()
							})
						});
						this.tips = list;
					}
				})
			} else {
				tab.hide();
			}
		}
	}
</script>

<style>
	.search-header {
		width: 100%;
		height: 45px;
		background-color: #FA436A;
	}

	#tips_table {
		padding-bottom: 20px;
		padding-left: 20px;
		font-size: 18px;
		background-color: #DCDFE6;
		width: 100%;
	}
</style>
